<template>
	<div class="middle">
		<div class="middlebg"></div>
		<!--小块部分-->
		<div class="top">
			<!-- <router-link to="../grade">
				<div class="blue" v-if="rule==2?false:true">
					<span class="title">年级管理</span>
				</div>
			</router-link> -->
			<router-link to="../classes">
				<div class="blue">
					<i class="iconfont  icon-banjiguanli"></i>
					<span class="title">班级管理</span>
				</div>
			</router-link>
			<router-link to="../teacher">
				<div class="blue" v-if="rule==2?false:true">
					<i class="iconfont  icon-jiaolian1"></i>
					<span class="title">教师管理</span>
				</div>
			</router-link>
			<router-link to="../student">
				<div class="blue">
					<i class="iconfont  icon-wodexuesheng"></i>
					<span class="title">学生管理</span>
				</div>
			</router-link>
		</div>
		<!--中间部分-->
		<div class="banner">
			<router-link to="../teachingPlan">
				<div class="pink" v-if="rule==1?false:true">
					<i class="iconfont icon-jiaoxuepingjia"></i>
					<span class="title">教学计划</span>
				</div>
			</router-link>
			<router-link to="../lesson">
				<div class="pink" v-if="rule==1?false:true">
					<i class="iconfont  icon-beikejiaoan"></i>
					<span class="title">备课</span>
				</div>
			</router-link>
			<router-link to="../syllabus">
				<div class="pink" v-if="rule==2?false:true">
					<i class="iconfont  icon-paikebiao"></i>
					<span class="title">课程表</span>
				</div>
			</router-link>
			<router-link to="../plan">
				<div class="pink" v-if="rule==1?false:true">
					<i class="iconfont  icon-jiaoxuejiaoyu"></i>
					<span class="title">教案管理</span>
				</div>
			</router-link>
			<router-link to="../resources">
				<div class="pink">
					<i class="iconfont  icon-kucun"></i>
					<span class="title">教案库</span>
				</div>
			</router-link>
		</div>
		<!--下面部分-->
		<div class="bottom">
			<router-link to="../beginClass">
				<div class="green">
					<i class="iconfont  icon-suishishangke"></i>
					<span class="title">上课记录</span>
				</div>
			</router-link>
			<router-link to="../homework">
				<div class="green">
					<i class="iconfont  icon-zuoye"></i>
					<span class="title">家庭作业</span>
				</div>
			</router-link>
			<router-link to="../equipment">
				<div class="green">
					<i class="iconfont  icon-shebei"></i>
					<span class="title">设备查看</span>
				</div>
			</router-link>
			<router-link to="../notice">
				<div class="green">
					<i class="iconfont icon-gonggao"></i>
					<span class="title">公告</span>
				</div>
			</router-link>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
		    return {
		        rule:'',
		    }
		},
		created(){
			//获取到身份
			var rule = localStorage.getItem('rule')
			this.rule = rule
		}
	}
</script>

<style scope>
	.el-main {
		padding: 0;
	}
	/*背景部分*/
	.middle {
	    height: 100%;
	    width: 100%;
	    background:repeat center top;
	    background-size: contain;
	}
	.middle .content {
		padding: 2%;
	}
</style>

<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.middle {
		.top,.banner,.bottom {
			padding-top: 60px;
			padding-left: 45px;
			overflow: hidden;
			.blue ,.pink,.green{
				background: #3598dc;
				width: 160px;
				text-align: center;
				height: 115px;
				margin-right: 60px;
				float: left;
				i{
					color: #fff;
					font-size: 40px;
					display: block;
					padding-top: 20px;
					padding-bottom: 10px;
				}
				.title {
					display: block;
					text-align: center;
					color: #fff;
				}
			}
			.pink {
				background: #e7505a;
			}
			.green {
				background: #00b02d;
			}
		}
	}
</style>
